<!--
 * @Description: 
 * @Autor: 赖维健(lwj1994)
 * @Date: 2021-09-28 10:48:40
 * @LastEditors: 赖维健(lwj1994)
 * @LastEditTime: 2021-11-12 13:01:32
-->
<template>
  <div id="chart" class="chart"></div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'

export default defineComponent({
  name: 'collect',

  setup() {

    const state = reactive({
      option: {
        grid3D: {},
        xAxis3D: {
          type: 'category'
        },
        yAxis3D: {},
        zAxis3D: {},
        dataset: {
          dimensions: [
            'Income',
            'Life Expectancy',
            'Population',
            'Country',
            { name: 'Year', type: 'ordinal' }
          ],
          source: []
        },
        series: [
          {
            type: 'scatter3D',
            symbolSize: 2.5,
            encode: {
              x: 'Country',
              y: 'Life Expectancy',
              z: 'Income',
              tooltip: [0, 1, 2, 3, 4]
            }
          }
        ]
      }
    })

    onMounted(() => {
      // 渲染的点集
      let points = []
      // 颜色间隔步长, 点集越大, 会卡...
      let step = 8

      // 颜色最大值
      let limit = 256
      for (let r = 0; r <= limit; r += step) {
        for (let g = 0; g <= limit; g += step) {
          for (let b = 0; b <= limit; b += step) {
            points.push([r, g, b])
          }
        }
      }

      let chart = echarts.init(document.getElementById('chart'))

      chart.setOption({
        tooltip: {
          show: true,
          formatter: ({ data }) => {
            let [r, g, b] = data
            return `<div><span style="display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: rgb(${r},${g},${b});"></span> rgb(${r},${g},${b})</div>`
          }
        },
        grid3D: {
          viewControl: {
            animation: true,
            autoRotate: true,
            autoRotateAfterStill: 1,
            distance: 400
          },
        },
        xAxis3D: {
          name: 'R',
          type: 'value',
          min: 0,
          max: 256,
          nameTextStyle: {
            color: 'red',
            fontSize: 30
          }
        },
        yAxis3D: {
          name: 'G',
          type: 'value',
          min: 0,
          max: 256,
          nameTextStyle: {
            color: 'green',
            fontSize: 30
          },
        },
        zAxis3D: {
          name: 'B',
          type: 'value',
          min: 0,
          max: 256,
          nameTextStyle: {
            color: 'blue',
            fontSize: 30
          }
        },
        series: [{
          type: 'scatter3D',
          data: points,
          itemStyle: {
            color: ({ data }) => {
              let [r, g, b] = data
              return `rgb(${r},${g},${b})`
            }
          },
        }]
      }, true)
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>